// 公共样式
@import './est/all';
@import './font';
@import './utils';
@import './animate';
// reset
.global-reset();
html, body {
	height: 100%;
	background-color: #eee;
}
a {
	color: inherit;
	text-decoration: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	transition: opacity .3s ease-in-out;
	&:active {
		opacity: .5;
	}
	&.com-link {
		color: #4990E2;
		.fontSize(24, 33);
	}
}
// init utils
.global-utils();
.com-hasheader {
	.rem64(padding-top, 80);
}
// 公共头
.com-header {
	position: fixed;
	width: 100%;
	.rem64(height, 80);
	.rem64(font-size, 32);
	top: 0;
	left: 0;
	color: #fff;
	z-index: 99;
	background-color: rgba(0,0,0,0.30);
	transition: .3s ease;
	&.is-scrolled {
		background-color: #fff;
		color: #000;
		border-bottom: 1px solid #ccc;
		.com-search-ipt {
			&::-webkit-input-placeholder {
				color: #ccc;
			}
			color: #000;
			background-color: #eee;
		}
	}
}
.com-header-logo {
	width: 100px;
}
.com-header-title {
	transition: opacity .3s ease;
}
.com-header-item {
	.rem64(width, 80);
	.rem64(height, 80);
	transition: opacity .3s ease;
	a {
		.size(100%);
		&:extend(.u-fc);
	}
}
.com-dropmenu {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	color: #4A4A4A;
	display: none;
}
.com-drop-item {
	.rem64(font-size, 28);
	.rem64(line-height, 40);
	.rem64(height, 80);
	.rem64(padding-left, 35);
	.rem64(padding-right, 35);
	&.is-cur {
		.iconfont {display: none;}
	}
	&.is-cur, &:active {background-color: #eee;}
}
// 搜索
.com-global-search {
	position: absolute;
	top: 0;
	.rem64(left, 80);
	.rem64(right, 0);
	margin: auto;
	display: none;
	.com-search-ipt {
		.rem64(border-radius, 8);
		.rem64(height, 50);
		.rem64(font-size, 24);
		.rem64(padding-left, 10);
		.rem64(padding-right, 10);
		outline: none;
		&::-webkit-input-placeholder {
			color: inherit;
		}
		border: none;
		background: rgba(255,255,255,0.30);
		color: #fff;
	}
}
// 公共尾
.com-footer {
	background-color: #eee;
	text-align: center;
	color: #666;
	.rem64(padding-top, 40);
	.rem64(padding-bottom, 30);
	.rem64(padding-left, 60);
	.rem64(padding-right, 60);
}
.com-footer-links {
	.rem64(font-size, 20);
	.rem64(padding-bottom, 20);
}
.copyrights {
	.rem64(font-size, 16);
	.rem64(line-height, 28);
}
// 公共卡片样式
.com-card {
	.rem64(padding, 30);
	background-color: #fff;
	&.is-top {
		.rem64(padding-bottom, 0);
	}
	&.is-grey {
		color: #4a4a4a;
		background-color: #eee;
	}
	p.is-sm {
		.fontSize(24, 33);
		text-align: center;
	}
	+ .com-card {
		.rem64(margin-top, 20);
	}
	.com-card-title {
		.rem64(font-size, 36);
		.rem64(line-height, 50);
		.rem64(padding-bottom, 30);
		text-align: center;
	}
	.com-card-list {
		.fontSize(24, 33);
		color: #4a4a4a;
	}
	.com-card-highlight {
		.rem64(padding, 30);
		.rem64(margin-bottom, 30);
		.fontSize(48, 67);
		box-sizing: border-box;
		border: 1px solid #eee;
		color: #FFCC33;
		text-align: center;
	}
	.com-card-tip {
		color: #fff;
		.rem64(padding-top, 30);
		.rem64(font-size, 24);
	}
	.com-card-group {
		.clearfix();
		.com-card-item {
			width: 33.33%;
			float: left;
			color: #4a4a4a;
			box-sizing: border-box;
			.rem64(padding, 10);
			.fontSize(28, 40);
			p {
				.rem64(padding-top, 10);
				.rem64(padding-bottom, 10);
			}
			img {
				.rem64(width, 160);
				.rem64(height, 80);
			}
		}
	}
}
// 二维码
.com-qrcode {
	text-align: center;
	img {
		.rem64(width, 240);
		.rem64(height, 240);
	}
	p {
		.fontSize(24, 33);
		.rem64(padding-top, 10);
		.rem64(padding-bottom, 10);
		color: #4a4a4a;
	}
}
// 按钮
.com-btn {
	.rem64(padding-top, 10);
	.rem64(padding-bottom, 10);
	.rem64(padding-left, 20);
	.rem64(padding-right, 20);
	&.btn-stroke {
		border: 1px solid #F6A623;
		background-color: #F6A623;
		border-radius: 4px;
		color: #fff;
	}
}
// 公共横向滚动样式
.com-scrollx-wrap {
	overflow: hidden;
	.com-scrollx {
		font-size: 0;
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}
	.com-scrollx-item {
		.rem64(width, 240);
		.rem64(margin-left, 20);
		display: inline-block;
	}
}
// item box
.item-txt, .item-box {
	width: 100%;
}
.item-box {
	.rem64(height, 180);
	color: #fff;
	position: relative;
	&.is-bg {
		.rem64(height, 360);
	}
	img {
		.size(100%);
		.absolute(0,_, _,0)
	}
	.iconfont {
		.rem64(font-size, 48);
		position: relative;
	}
}
.item-num {
	.rem64(font-size, 24);
	.rem64(width, 50);
	.rem64(height, 50);
	color: #F6A623;
	position: relative;
	em {
		position: relative;
	}
	&:before {
		content: '';
		.size(100%);
		position: absolute;
		top: 0;
		left: 0;
		background-color: #fff;
		border-radius: 8px;
		transform: rotateZ(136deg);
	}
}
.item-desc {
	position: relative;
	.rem64(padding-top, 15);
	.title {
		.rem64(font-size, 14);
		line-height: 2;
	}
	.desc {
		.rem64(font-size, 28);
		.rem64(line-height, 36);
	}
}
.item-txt {
	.rem64(font-size, 24);
	.rem64(line-height, 36);
	.rem64(padding-bottom, 10);
	.rem64(padding-top, 6);
	.tip {
		.rem64(font-size, 14);
		.rem64(line-height, 28);
		color: #F6A623;
	}
}
// item-box end

.scroll-nav {
	&.is-fixed {
		position: fixed;
		width: 100%;
		left: 0;
		z-index: 66;
		border-bottom: 1px solid #ccc;
	}
}
// 公共tabbar
.com-tab + .com-card {
	.rem64(margin-top, 20);
}
.com-tab-bar {
	.rem64(padding-bottom, 30);
	a {
		display: inline-block;
		width: auto;
		.rem64(font-size, 24);
		.rem64(margin-left, 23);
		.rem64(margin-right, 23);
		.rem64(padding-bottom, 15);
	}
	.is-cur {
		color: #F6A623;
		border-bottom: 2px solid #F6A623;
	}
}
// flex-shrink:0; size: 100%可以用flex实现tab布局
// .com-tab-container {
// 	position: relative;
// 	overflow: hidden;
// }
// .com-tab-content {
// 	display: flex;
// }
// .com-tab-wrap {
// 	.size(100%);
// 	flex-shrink: 0;
// }
.com-content {
	overflow: hidden;
	& +.com-content {
		.rem64(padding-top, 30);
	}
	&.has-bg {
		.rem64(padding-top, 60);
		.rem64(padding-bottom, 60);
		.rem64(padding-left, 30);
		.rem64(padding-right, 30);
		color: #fff;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		.article {
			color: inherit;
		}
	}
	img {
		width: 100%;
	}
	.title {
		.rem64(font-size, 32);
		.rem64(line-height, 45);
		.rem64(padding-top, 20);
		.rem64(padding-bottom, 20);
	}
	.article {
		.rem64(font-size, 24);
		.rem64(line-height, 36);
		color: #666;
		&.lg {
			.fontSize(28, 40);
			.rem64(padding-top, 10);
		}
		&.detail {
			display: none;
		}
	}
	.sub {
		.fontSize(24, 33);
		.rem64(padding-top, 15);
		display: block;
		color: #999;
	}
	// 文章列表中的轮播图
	.com-article-swiper {
		.swiper-tips {
			.fontSize(24, 33);
			.rem64(padding-top, 30);
			.rem64(padding-bottom, 30);
			color: #4a4a4a;
		}
	}
}
// 团队
.com-team-group {
	.rem64(padding-top, 40);
	.team-avatar {
		.rem64(padding-bottom, 15);
		img {
			.rem64(width, 240);
			.rem64(height, 240);
			border-radius: 50%;
		}
		.team-nm {
			color: #000;
			.fontSize(28, 40);
			.rem64(padding, 10);
		}
	}
	.team-desc {
		.fontSize(24, 33);
		color: #333;
	}
}

// adswiper
.com-adswiper {
	.rem64(height, 420);
	background-color: #666;
	.swiper-wrapper {
		height: 100%;
	}
	.swiper-slide {
		a{
			.size(100%);
			color: #fff;
			position: relative;
		}
		img {
			.size(100%);
			.absolute(0,_,_,0);
		}
		.iconfont {
			position: relative;
			.rem64(font-size, 80);
		}
		.swiper-desc {
			position: relative;
			.title {
				.rem64(font-size, 48);
				.rem64(padding-bottom, 20);
			}
			.desc {
				.rem64(font-size, 36);
			}
		}
	}
	.swiper-pagination-bullet {
		background-color: #fff;
		opacity: 1;
	}
	.swiper-pagination-bullet-active {
		background: #F8E81C;
	}
}

// video list
.com-video-list{
	background-color: #fff;
	.list-title {
		text-align: center;
		color: #000;
		.fontSize(36, 50);
	}
	.video-list {
		.clearfix();
		.rem64(padding-top, 30);
	}
	.video-item {
		width: 50%;
		float: left;
		box-sizing: border-box;
		.rem64(padding-left, 10);
		.rem64(padding-right, 10);
		.rem64(margin-bottom, 10);
		.avatar {
			width: 100%;
			// .rem64(width, 268);
			.rem64(height, 200);
			margin: auto;
			position: relative;
			.iconfont {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				color: #fff;
				.rem64(width, 54);
				.rem64(height, 54);
				.rem64(font-size, 54);
			}
			img {
				.size(100%);
			}
		}
		p {
			.ellipsis();
			.fontSize(24, 36);
			.rem64(padding-top, 5);
			.rem64(padding-bottom, 5);
			color: #000;
		}
	}
}

// line tab 带一像素底边的靠左的tabbar
.com-line-tab {
	background-color: #fff;
	.com-tab-bar {
		.rem64(padding-bottom, 0);
		border-bottom: 1px solid #eee;
		a {
			.rem64(padding-left, 23);
			.rem64(padding-right, 23);
			.rem64(padding-top, 20);
			.rem64(padding-bottom, 20);
			.rem64(margin-left, 0);
			.rem64(margin-right, 0);
		}
	}
}

// 弹出层容器
.com-ui-layer {
	position: fixed;
	top: 0;
	left: 0;
	.size(100%);
	z-index: 99;
	overflow: hidden;
	// 图片查看器
	&.com-pic-checker {
		display: none;
		background-color: rgba(0,0,0,0.70);
		color: #fff;
		.checker-close {
			color: #fff;
			.fontSize(26, 26);
			position: absolute;
			.rem64(padding, 10);
			.rem64(right, 40);
			.rem64(top, 40);
		}
		.checker-container {
			overflow: visible;
			position: absolute;
			width: 100%;
			.rem64(top, 120);
			left: 0;
			img {
				width: 100%;
			}
			.swiper-pagination {
				.rem64(bottom, -40);
				.swiper-pagination-bullet {
					background-color: #fff;
					opacity: 1;
				}
				.swiper-pagination-bullet-active {
					background-color: #F8E81C;;
				}
			}
			.checker-tip {
				color: #fff;
				text-align: center;
				position: absolute;
				width: 100%;
				left: 0;
				.rem64(bottom, -90);
				.fontSize(24, 33);
			}
		}
	}
}
// 地图按钮
.com-map-btn-wrap {
	position: absolute;
	left: 0;
	right: 0;
	.rem64(bottom, 66);
	margin: auto;
	color: #333;
	.com-map-btn {
		.fontSize(28, 40);
		.rem64(width, 360);
		.rem64(height, 66);
		.rem64(border-radius, 28);
		margin: auto;
		background-color: #fff;
		box-shadow: 0 1px 2px 0 rgba(0,0,0,0.50);
		a {
			height: 100%;
		}
	}
}
// 地图容器
.com-map-layer {
	.rem64(height, 720);
	background-color: #D8D8D8;
}
// 列表页banner
.com-list-banner {
	.rem64(height, 240);
	.fontSize(48, 68);
	background: #555 url(/src/imgs/img2.jpg) center no-repeat;
	color: #fff;
}
// 详情页banner
.com-detail-banner {
	.rem64(height, 420);
	color: #fff;
	background: #000 center no-repeat;
	background-size: cover;
	position: relative;
	.title {
		.fontSize(48, 68);
	}
	.tip {
		.fontSize(24, 33);
	}
	.detail-tipbar {
		position: absolute;
		right: 0;
		.rem64(bottom, 30);
		.rem64(min-width, 120);
		.rem64(min-height, 40);
		.fontSize(20, 28);
		color: #fff;
		background-color: #F5A537;
	}
}